import React, {Component} from 'react';
import {
    StyleSheet,
    View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Dimensions} from 'react-native';
import OneTabPage from './page/OneTabPage';
import TwoTabPage from './page/TwoTabPage';
import ThreeTabPage from './page/ThreeTabPage';

/**
 * 作者：guoyzh
 * 时间：2018/6/3/003
 * 功能：
 */

const deviceW = Dimensions.get('window').width

const basePx = 375

function px2dp(px) {
    return px * deviceW / basePx
}

export default class MainActivity extends Component {
    state = {
        selectedTab: 'home'
    };

    render() {
        return (
            <TabNavigator style={styles.container}>


                <TabNavigator.Item
                    selected={this.state.selectedTab === 'home'}
                    title="首页"
                    selectedTitleStyle={{color: "#3496f0"}}
                    renderIcon={() => <Icon name="home" size={px2dp(22)} color="#666"/>}
                    renderSelectedIcon={() => <Icon name="home" size={px2dp(22)} color="#3496f0"/>}
                    // badgeText="1"
                    onPress={() => this.setState({selectedTab: 'home'})}>
                    <OneTabPage/>
                </TabNavigator.Item>


                <TabNavigator.Item
                    selected={this.state.selectedTab === 'profile'}
                    title="新闻"
                    selectedTitleStyle={{color: "#3496f0"}}
                    renderIcon={() => <Icon name="github" size={px2dp(22)} color="#666"/>}
                    renderSelectedIcon={() => <Icon name="github" size={px2dp(22)} color="#3496f0"/>}
                    onPress={() => this.setState({selectedTab: 'profile'})}>
                    <TwoTabPage/>
                </TabNavigator.Item>


                <TabNavigator.Item
                    selected={this.state.selectedTab === 'user'}
                    title="我的"
                    selectedTitleStyle={{color: "#3496f0"}}
                    renderIcon={() => <Icon name="user" size={px2dp(22)} color="#666"/>}
                    renderSelectedIcon={() => <Icon name="user" size={px2dp(22)} color="#3496f0"/>}
                    onPress={() => this.setState({selectedTab: 'user'})}>
                    <ThreeTabPage/>
                </TabNavigator.Item>


            </TabNavigator>
        );
    }

    // 生命周期
    componentDidMount() {

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});